<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="robots" content="noindex, noarchive">
	<title>Transfonter demo</title>
	<link href="stylesheet.css" rel="stylesheet">
	<style>
		/*
        http://meyerweb.com/eric/tools/css/reset/
        v2.0 | 20110126
        License: none (public domain)
        */

		html,
		body,
		div,
		span,
		applet,
		object,
		iframe,
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		p,
		blockquote,
		pre,
		a,
		abbr,
		acronym,
		address,
		big,
		cite,
		code,
		del,
		dfn,
		em,
		img,
		ins,
		kbd,
		q,
		s,
		samp,
		small,
		strike,
		strong,
		sub,
		sup,
		tt,
		var,
		b,
		u,
		i,
		center,
		dl,
		dt,
		dd,
		ol,
		ul,
		li,
		fieldset,
		form,
		label,
		legend,
		table,
		caption,
		tbody,
		tfoot,
		thead,
		tr,
		th,
		td,
		article,
		aside,
		canvas,
		details,
		embed,
		figure,
		figcaption,
		footer,
		header,
		hgroup,
		menu,
		nav,
		output,
		ruby,
		section,
		summary,
		time,
		mark,
		audio,
		video {
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
		}
		/* HTML5 display-role reset for older browsers */

		article,
		aside,
		details,
		figcaption,
		figure,
		footer,
		header,
		hgroup,
		menu,
		nav,
		section {
			display: block;
		}

		body {
			line-height: 1;
		}

		ol,
		ul {
			list-style: none;
		}

		blockquote,
		q {
			quotes: none;
		}

		blockquote:before,
		blockquote:after,
		q:before,
		q:after {
			content: '';
			content: none;
		}

		table {
			border-collapse: collapse;
			border-spacing: 0;
		}
		/* common styles */

		body {
			background: #f1f1f1;
			color: #000;
		}

		.page {
			background: #fff;
			width: 920px;
			margin: 0 auto;
			padding: 20px 20px 0 20px;
			overflow: hidden;
		}

		.font-container {
			overflow-x: auto;
			overflow-y: hidden;
			margin-bottom: 40px;
			line-height: 1.3;
			white-space: nowrap;
			padding-bottom: 5px;
		}

		h1 {
			position: relative;
			background: #444;
			font-size: 32px;
			color: #fff;
			padding: 10px 20px;
			margin: 0 -20px 12px -20px;
		}

		.letters {
			font-size: 25px;
			margin-bottom: 20px;
		}

		.s10:before {
			content: '10px';
		}

		.s11:before {
			content: '11px';
		}

		.s12:before {
			content: '12px';
		}

		.s14:before {
			content: '14px';
		}

		.s18:before {
			content: '18px';
		}

		.s24:before {
			content: '24px';
		}

		.s30:before {
			content: '30px';
		}

		.s36:before {
			content: '36px';
		}

		.s48:before {
			content: '48px';
		}

		.s60:before {
			content: '60px';
		}

		.s72:before {
			content: '72px';
		}

		.s10:before,
		.s11:before,
		.s12:before,
		.s14:before,
		.s18:before,
		.s24:before,
		.s30:before,
		.s36:before,
		.s48:before,
		.s60:before,
		.s72:before {
			font-family: Arial, sans-serif;
			font-size: 10px;
			font-weight: normal;
			font-style: normal;
			color: #999;
			padding-right: 6px;
		}

		pre {
			display: block;
			position: relative;
			padding: 9px;
			margin: 0 0 10px;
			font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
			font-size: 13px;
			line-height: 1.428571429;
			color: #333;
			font-weight: normal !important;
			font-style: normal !important;
			background-color: #f5f5f5;
			border: 1px solid #ccc;
			overflow-x: auto;
			border-radius: 4px;
		}

		pre:after {
			display: block;
			position: absolute;
			right: 0;
			top: 0;
			content: 'Usage';
			line-height: 1;
			padding: 5px 8px;
			font-size: 12px;
			color: #767676;
			background-color: #fff;
			border: 1px solid #ccc;
			border-right: none;
			border-top: none;
			border-radius: 0 4px 0 4px;
			z-index: 10;
		}
		/* responsive */

		@media (max-width: 959px) {
			.page {
				width: auto;
				margin: 0;
			}
		}
	</style>
</head>

<body>
	<div class="page">
		<div class="demo" style="font-family: 'iconfont'; font-weight: normal; font-style: normal;">
			<h1>iconfont</h1>
			<pre>.your-style {
    font-family: 'iconfont';
    font-weight: normal;
    font-style: normal;
}</pre>
			<div class="font-container">
				<p class="letters">
					abcdefghijklmnopqrstuvwxyz<br> ABCDEFGHIJKLMNOPQRSTUVWXYZ
					<br> 0123456789.:,;()*!?'@#
					<>$%&^+-=~
				</p>
				<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
				<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
				<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
				<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
				<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
				<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
				<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
				<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
				<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
				<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
				<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
			</div>
		</div>
	</div>
</body>

</html>